<template>
  <div class="project">
    <div class="project-left">
      <div class="side-navigation" @click="is_show_setBox=false">
        <div class="add-project-btn" v-if="cur_list=='classify'" @click="addProjectFn"><i></i>新建项目</div>
        <div class="top">
          <div class="top-switch">
            <div class="switch-box">
              <div :class="active==1?'active':''" @click="switchFn(1)">全部</div>
              <div :class="active==2?'active':''" @click="switchFn(2)">关注</div>
            </div>
            <span :class="['bg',active==1?'right-52':'left-52']"></span>
          </div>
        </div>
        <div class="search">
          <input @input="searchProject('search')"
                 placeholder="搜索项目名称" v-model="searchProjectName"
                 class="search-box"/>
<!--          <i v-show="is_show_close_search_icon" class="close_icon" @click="close_search"></i>-->
        </div>
        <transition name="component-fade" mode="out-in">
          <ul v-if="cur_list=='classify'" class="project-classify">
            <li :class="project_classify_active==1?'active':''">
              <div class="title" @click="openListBulletinBoard"
              >项目看板<i :class="is_show_bulletinBoard?'rotate':''"></i>
              </div>
              <el-collapse-transition>
                <vuescroll :ops="ops">
                  <ul v-show="is_show_bulletinBoard" class="list scrollbar-y">
                    <li :class="item.is_active?'active':''" v-for="(item,index) in projectList" :key="index"
                        @click="toBullentBoard(item)">{{item.shortName}}
                    </li>
                  </ul>
                </vuescroll>
              </el-collapse-transition>
            </li>
            <li :class="project_classify_active==2?'active':''">
              <div class="title" @click="openListProgress"
              >项目列表 <i :class="is_show_progress?'rotate':''"></i></div>
              <el-collapse-transition>
                <vuescroll :ops="ops">
                  <ul v-show="is_show_progress" class="list">
                    <li :class="[item.is_active?'active':'']" v-for="(item,index) in projectTypeList" :key="index"
                        @click="toProjectList(item)" @contextmenu.prevent="openProjectTypeBox($event,item)">
                      <p v-show="item.is_show_edit==false">{{item.projectTypeName}}（{{item.projectNum}}）</p>
                      <input v-show="item.is_show_edit==true"
                             @blur="editProjectTypeName(item)"
                             v-model="item.projectTypeName"
                             class="edit-item" type="text">
                    </li>
                  </ul>
                </vuescroll>
              </el-collapse-transition>
              <div class="setProjectTypeBox" v-if="is_show_setBox" :style="{top:is_show_setBox_top+'px'}">
                <div @click="addProjectType">添加分组</div>
                <div @click="renameProjectType">重命名</div>
                <div @click="delProjectType">删除分组</div>
              </div>
            </li>
          </ul>
          <div v-else>
            <vuescroll :ops="ops2">
              <div class="search-view">
                <h3>看板</h3>
                <ul class="search-list">
                  <li v-for="(item,index) in searchProjectList" :key="index" @click="toBullentBoard(item)">
                    {{item.shortName}}
                  </li>
                </ul>
                <h3>详情</h3>
                <ul class="search-list">
                  <li v-for="(item,index) in searchProjectList" :key="index" @click="toProjectDetails(item)">
                    {{item.shortName}}
                  </li>
                </ul>
                <i class="close-search-view" @click="searchProject('close')"></i>
              </div>
            </vuescroll>
          </div>
        </transition>
      </div>
    </div>
    <div class="project-right" @click="is_show_setBox=false">
      <router-view v-show="is_show_default_project==false"></router-view>
      <div v-show="is_show_default_project==true&&active==1" class="default-project-box">
        <defaultProject></defaultProject>
      </div>
      <div v-show="is_show_default_project==true&&active==2" class="no-follow-project">
        <div class="inner">
          <div class="box">
            <img src="../../assets/img/defaultPage/pic_zwxm_gz.png" alt="">
            <p>暂无关注项目，去关注一个项目吧！</p>
          </div>
        </div>
      </div>
    </div>
    <transition name="fade">
      <addProject :data="data_addProject" v-if="data_addProject.is_show_addProject" @update="updateProjectList"></addProject>
    </transition>
  </div>
</template>

<script>
  import addProject from '@/components/addProject'
  import defaultProject from '@/components/defaultProject'
  import vuescroll from 'vuescroll'

  export default {
    name: "project",
    components: {
      vuescroll, addProject, defaultProject
    },
    data() {
      return {
        is_show_close_search_icon:false,
        searchTime:'',
        is_show_default_project: false,
        searchProjectName: '',//搜素的项目名称
        searchProjectList: [],//搜素返回的项目列表
        active: '1',//1：全部 2：关注
        project_classify_active: '1',//项目分类1：项目看板 2：项目列表
        is_show_bulletinBoard: false,//项目看板列表是否展示
        is_show_progress: false,//项目进度列表是否展示
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '40px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '0px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        ops2: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '60px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '5px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        cur_list: 'classify',//当前列表为classify（分类列表），search（搜索列表）
        data_addProject: {
          is_show_addProject: false
        },
        projectTypeList: [],//项目分类
        projectList: [],//项目列表
        select_projectTypeId: '',// // 项目分类当前被选中的id;
        select_projectId: '', //项目看板当前被选中的项目
        is_show_setBox: false,//项目列表分类设置框
        is_show_setBox_top: '',
        cur_projectType_item: {},//当前需要编辑的项目列表下的项目分类
      }
    },
    watch: {
      $route() {
        //判断是全部还是关注
        if (this.$route.query.attention == 1) {
          //关注
          this.active = 2;
        } else if (this.$route.query.attention == "") {
          //全部
          this.active = 1;
        }
        //判断当前是项目看板展开，还是项目列表展开
        if (this.$route.query.type == 1) {
          this.project_classify_active = 1;
          this.is_show_bulletinBoard = true;
          //项目看板当前被选中的项目
          this.select_projectId = this.$route.query.projectId;
        } else if (this.$route.query.type == 2) {
          this.project_classify_active = 2;
          this.is_show_progress = true;
          // 项目分类当前被选中的id;
          this.select_projectTypeId = this.$route.query.projectType;
        }
      }
    },
    created() {
      //判断是全部还是关注
      if (this.$route.query.attention == 1) {
        //关注
        this.active = 2;
      } else if (this.$route.query.attention == "") {
        //全部
        this.active = 1;
      }
      //判断当前是项目看板展开，还是项目列表展开
      if (this.$route.query.type == 1) {
        this.project_classify_active = 1;
        this.is_show_bulletinBoard = true;
        //项目看板当前被选中的项目
        this.select_projectId = this.$route.query.projectId;
      } else if (this.$route.query.type == 2) {
        this.project_classify_active = 2;
        this.is_show_progress = true;
        // 项目分类当前被选中的id;
        this.select_projectTypeId = this.$route.query.projectType;
      }

      //获取所有项目
      this.getProjectList();
      //获取所有项目分类
      this.getProjectType();
    },
    methods: {
      //关闭搜索
      close_search(){
        this.is_show_close_search_icon=false;
        this.searchProjectName='';
      },
      //更新项目列表
      updateProjectList(){
        // this.$router.push({
        //   path:'/project/info',
        //   query: {projectId: 'all'}
        // });
        console.log('更新了项目');
        this.getProjectList();
        this.getProjectType();
        // console.log(this.$route.name);
        // if(this.$route.name=='ProjectList'){
        //   this.$router.push({
        //     path: '/project/projectList',
        //     query: {projectId: 'all', attention: '', type: 2,time:new Date()}
        //   });//type:1项目看板
        // }else{
        //   this.$router.push({
        //     path: '/project/bulletinBoard',
        //     query: {projectId: 'all', attention: '', type: 1,time:new Date()}
        //   });//type:1项目看板
        // }
      },
      //去项目详情
      toProjectDetails(item) {
        this.$router.push({
          path: '/project/info',
          query: {projectId: item.projectId}
        });
      },
      //重命名分组编辑 有id为编辑 无id为新增
      editProjectTypeName(item) {
        item.is_show_edit=false;
        item.is_show_setBox = false;
        if (item.projectTypeId) {
          this.$http.post('/project/projectType/update', {
            id: item.projectTypeId,
            name: item.projectTypeName,
          }).then(res => {
            if (res.statusCode == 200) {
              this.$message.success('重新命名成功！');
              item.is_show_setBox = false;
              console.log(item.is_show_setBox);
            } else {
              this.$message.error(res.statusMsg);
            }
          });
        } else {
          this.$http.post('/project/projectType/add', {
            name: item.projectTypeName,
            companyId: this.$store.state.userInfo.companyId,
            image: '',
            orderNum: 1,
            status: '1',
          }).then(res => {
            if (res.statusCode == 200) {
              this.$message.success('新增成功！');
              item.is_show_setBox = false;
              console.log(item.is_show_setBox);
            } else {
              this.$message.error(res.statusMsg);
            }
          });
        }

      },
      //添加分组
      addProjectType() {
        let obj = {
          projectTypeName: '新增分组',
          projectNum: '0',
          is_active: false,
          is_show_setBox: true,
          is_show_edit: true,
        };
        this.projectTypeList.push(obj);
      },
      //重命名分组名称
      renameProjectType() {
        this.cur_projectType_item.is_show_edit = true;
      },
      //删除分组
      delProjectType() {
        this.$confirm('此操作将删除该项目类型, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post('/project/projectType/delete', {
            id: this.cur_projectType_item.projectTypeId
          }).then(res => {
            if (res.statusCode == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getProjectType();
            } else {
              this.$message.error(res.statusMsg);
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //打开设置项目框
      openProjectTypeBox(e, item) {
        if (item.projectTypeId == 'all') {
          this.$message.error('默认分类不能设置!');
          return;
        }
        this.cur_projectType_item = item;
        let y = e.pageY - 100;
        this.is_show_setBox = true;
        this.is_show_setBox_top = y;
      },
      //去项目看板
      toBullentBoard(item) {
        console.log(item);
        //重置项目列表
        this.projectTypeList.map(function (list, index) {
          list.is_active = false
        });
        this.projectList.map(function (list, index) {
          list.is_active = false
        });
        item.is_active = true;
        let attention = this.active == 2 ? '1' : '';//后台接口1代表关注
        this.$router.push({
          path: '/project/bulletinBoard',
          query: {projectId: item.id || item.projectId, attention: attention, type: 1}
        });//type:1项目看板
      },
      //去项目列表
      toProjectList(item) {
        //重置项目看板
        this.projectList.map(function (list, index) {
          list.is_active = false
        });
        this.projectTypeList.map(function (list, index) {
          list.is_active = false
        });
        item.is_active = true;
        let attention = this.active == 2 ? '1' : '';//后台接口1代表关注
        this.$router.push({
          path: '/project/projectList',
          query: {projectType: item.projectTypeId, attention: attention, type: 2}
        });//type:2项目列表
      },
      //获取所有项目
      getProjectList() {
        let _this = this;
        let attention = '';
        if (this.active == 2) {
          attention = 1
        }
        this.$http.post('/project/project/list', {
          comId: this.$store.state.userInfo.companyId,
          userId: this.$store.state.userInfo.userId,
          pageNum: 1,
          pageSize: 100,
          attention: attention
        }).then(function (res) {
          if (res.statusCode == 200) {
            let list = res.data.list;
            if (list.length == 0) {
              //没有项目
              _this.is_show_default_project = true;
              return
            } else {
              _this.is_show_default_project = false;
            }
            list.map(function (item, index) {
              item.is_active = false;
            });
            list.unshift({
              shortName: '全部项目',
              id: 'all',
              is_active: false
            });
            list.map(function (item, index) {
              if (item.id == _this.select_projectId) {
                item.is_active = true;
              }
            });
            _this.projectList = list;
          } else {
            _this.$message.error(res.statusMsg);
          }
        });
      },
      //获取项目类别
      getProjectType() {
        let attention = false;
        if (this.active == 2) {
          attention = true;//关注
        }
        let _this = this;
        this.$http.get('/project/projectType/projectNum?pageNum=1&pageSize=100&companyId=' + this.$store.state.userInfo.companyId + '&attention=' + attention + '&userId=' + this.$store.state.userInfo.userId).then(function (res) {
          if (res.statusCode == 200) {
            let list = res.data;
            let allNum = 0;
            list.map(function (item, index) {
              item.is_active = false;
              allNum += item.projectNum;
            });
            list.unshift({
              projectNum: allNum,
              projectTypeName: '全部',
              projectTypeId: 'all',
              is_active: false,
              is_show_setBox: false,
              is_show_edit: false,
            });
            list.map(function (item, index) {
              if (item.projectTypeId == _this.select_projectTypeId) {
                item.is_active = true;
              }
              item.is_show_setBox = false;
              item.is_show_edit = false;
            });
            _this.projectTypeList = list;
          } else {
            _this.$message.error(res.statusMsg);
          }
        })
      },
      //切换全部和关注
      switchFn(data) {
        let query = JSON.parse(JSON.stringify(this.$route.query));
        query.attention = data == 2 ? 1 : "";
        let path = this.$route.path;
        this.$router.push({path: '' + path, query: query});
        this.active = data;
        this.getProjectList();
        this.getProjectType();
      },
      //打开项目看板
      openListBulletinBoard() {
        this.is_show_progress = false;
        this.is_show_bulletinBoard = !this.is_show_bulletinBoard;
        this.project_classify_active = 1;
      },
      //打开项目列表
      openListProgress() {
        this.is_show_bulletinBoard = false;
        this.is_show_progress = !this.is_show_progress;
        this.project_classify_active = 2;
      },
      //搜素项目
      searchProject(data) {
        this.is_show_close_search_icon=true;
        if(data=='close'){
          this.cur_list='classify';
          this.searchProjectName='';
        }else{
          this.cur_list = data;
        }

        if (data == 'search') {
          //搜索项目
          clearInterval(this.searchTime);
          this.searchTime=setTimeout(()=>  {
            let params = {
              projectName: this.searchProjectName,
              userId: this.$store.state.userInfo.userId,
              pageSize: 999,
              pageNum: 1,
              attention: this.active == 2 ? '1' : '',
            };
            this.$http.get('/project/project/view/list?pageSize=999&pageNum=1&projectName=' + params.projectName + '&userId=' + params.userId + '&attention=' + params.attention).then(res => {
              if (res.statusCode == 200) {
                this.searchProjectList = res.data.list;
              } else {
                this.$message.error(res.statusMsg);
              }
            });

          },1000);
        }
      },
      //新建项目
      addProjectFn() {
        this.data_addProject.is_show_addProject = true;
      }
    }
  }
</script>

<style lang="scss" scoped type="text/scss">
  .project {
    width: 100%;
    display: flex;
    height: 100%;

    .default-project-box {
      width: 100%;
      height: 100%;
      padding: 24px;
      box-sizing: border-box;
      position: relative;
    }

    .component-fade-enter-active, .component-fade-leave-active {
      transition: opacity .3s ease;
    }

    .component-fade-enter, .component-fade-leave-to
      /* .component-fade-leave-active for below version 2.1.8 */
    {
      opacity: 0;
    }

    .project-left {
      width: 304px;
      padding: 23px 24px 24px 24px;
      box-sizing: border-box;
      height: 100%;

      .side-navigation {
        height: 100%;
        background-color: #FFFFFF;
        border-radius: 6px;
        position: relative;

        .top {
          width: 208px;
          margin: 0 auto;
          padding-top: 24px;
          height: 77px;
          box-sizing: border-box;
          border-bottom: 1px solid #e9eff4;

          .top-switch {
            width: 104px;
            line-height: 32px;
            height: 32px;
            margin: 0 auto;
            display: flex;
            background-color: #f2f6f9;
            border-radius: 16px;
            text-align: center;
            position: relative;

            .switch-box {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              z-index: 2;

              > div {
                width: 50%;
                color: #454a55;
                font-size: 14px;
                cursor: pointer;
                border-radius: 16px;
                position: absolute;
                top: 0;
                /*transition: 0.5s all;*/
              }

              > div:first-child {
                left: 0;
              }

              div:last-child {
                right: 0;
              }

              div.active {
                color: #ffffff;
              }
            }

            .bg {
              width: 52px;
              height: 32px;
              position: absolute;
              background-color: #0a52e4;
              border-radius: 16px;
              left: 0;
              top: 0;
              transition: 0.2s all;
            }

            .left-52 {
              transform: translateX(52px);
            }

            .right-52 {
              transform: translateX(0px);
            }
          }
        }

        .search {
          padding: 24px 24px 32px 24px;
          position: relative;
          .close_icon{
            position: absolute;
            right: 38px;
            top: 36px;
            background-image: url("../../assets/img/close.png");
            width: 11px;
            height: 11px;
            background-repeat: no-repeat;
            background-size: cover;
            cursor: pointer;
          }
          .search-box {
            display: block;
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: #f2f6f9;
            font-size: 14px;
            border-radius: 6px;
            text-indent: 11px;
            color: #454a55;
            border: #f2f6f9 solid 1px;
          }

          .search-box:focus {
            border: #0a52e4 solid 1px;
          }

        }

        .search-view {
          background-color: #F4F5F9;
          width: 210px;
          margin: 0 auto;
          border-radius: 6px;
          max-height: 623px;
          position: relative;

          .close-search-view {
            position: absolute;
            background-image: url("../../assets/img/project/projectList/close.png");
            background-size: cover;
            background-repeat: no-repeat;
            width: 8px;
            height: 8px;
            right: 10px;
            top: 10px;
            cursor: pointer;
          }

          h3 {
            font-size: 14px;
            color: #454A55;
            font-weight: normal;
            padding: 0 16px;
            padding-top: 23px;
          }

          h3:nth-of-type(2) {
            padding-top: 0;
          }

          .search-list {
            padding: 23px 30px;
            font-size: 14px;
            color: #7A8A94;
            background-color: #F4F5F9;

            li {
              padding-top: 16px;
              cursor: pointer;
            }

            li:first-child {
              padding-top: 0;
            }
          }

          .search-list:nth-of-type(2) {
            li:last-child {
              border-bottom-left-radius: 6px;
              border-bottom-right-radius: 6px;
            }
          }

        }


        .project-classify {
          padding: 0 24px 0 32px;
          /*position: relative;*/

          .setProjectTypeBox {
            width: 103px;
            height: 99px;
            background-color: #ffffff;
            box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
            border-radius: 6px;
            right: 10px;
            position: absolute;
            z-index: 100;
            padding: 3px 0px;
            padding-left: 22px;
            box-sizing: border-box;

            > div {
              line-height: 30px;
              color: #96A2AA;
              font-size: 12px;
              cursor: pointer;
            }
          }

          > li {
            margin-bottom: 32px;

            .title {
              line-height: 1;
              position: relative;
              font-size: 16px;
              color: #96a2aa;
              cursor: pointer;

              i {
                background-image: url("../../assets/img/bottom_icon.png");
                background-size: 10px 6px;
                background-repeat: no-repeat;
                background-position: center;
                position: absolute;
                width: 10px;
                height: 6px;
                right: 0;
                top: 5px;
                transition: 0.5s all;
              }
            }

            .list {
              margin-top: 32px;
              max-height: 150px;
              /*overflow-y: auto;*/

              > li {
                line-height: 37px;
                height: 37px;
                margin-bottom: 10px;
                color: #96a2aa;
                font-size: 14px;
                text-indent: 21px;
                cursor: pointer;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
              }

              .edit-item {
                width: 160px;
                height: 37px;
                line-height: 37px;
                text-indent: 18px;
                background: #F2F6F9;
                border-radius: 6px;
                font-size: 14px;
                color: #454A55;
                border: 1px solid #F2F6F9;
              }

              > li.active {
                color: #0a52e4;
              }

            }

            i.rotate {
              transform: rotate(180deg);
            }
          }

          > li.active {
            .title {
              color: #454a55;
              font-weight: bold;
            }

          }
        }

        .add-project-btn {
          width: 122px;
          height: 40px;
          line-height: 40px;
          text-indent: 47px;
          font-size: 14px;
          color: #fff;
          background-color: #ff8f2b;
          border-radius: 6px;
          position: absolute;
          bottom: 24px;
          left: 67px;
          cursor: pointer;
          z-index: 100;

          i {
            position: absolute;
            width: 13px;
            height: 11px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            background-image: url("../../assets/img/project/addProject.png");
            top: 14px;
            left: 24px;
          }
        }
      }
    }

    .project-right {
      width: calc(100% - 304px);
      padding: 24px 24px 24px 0;
      position: relative;
      .no-follow-project{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 25px 25px 25px 0;
        box-sizing: border-box;
        >.inner{
          width: 100%;
          height: 100%;
          background: #ffffff;
          >.box{
            width: 290px;
            height: 312px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
            font-size: 18px;
            color: #96A2AA;
            img{
              display: inline-block;
              width: 266px;
            }
            p{
              padding-top:39px ;
            }
          }
        }
      }
    }
  }
</style>
<style>
  .__view {
    height: 100% !important;
  }
</style>
